
<template>
  <div v-cloak class="pull-height animated" :style="{backgroundImage:'url('+mp3.picUrl+')'}" style="background-size: 100vh 100vh">
    <div class="index">
      <el-container>
        <el-header style="background-color: #2aabd2;">
          <el-row>
            <el-col :span="6" :offset="18"><div class="grid-content bg-purple">
              <audio :src="mp3.mp3url" controls autoplay style="width: 250px;height: 20px"></audio>
            </div></el-col>
          </el-row>
        </el-header>
        <el-container>
          <el-aside width="200px" style="background-color: #545c64">
            <!--侧边栏-->
            <el-menu
                default-active="homePage"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                router
                unique-opened
                text-color="#fff"
                active-text-color="#ffd04b">

                <template v-for="menu in menuList">
                <el-menu-item :index="menu.index" v-if="menu.menu2s==null || menu.menu2s==''">
                  <template slot="title">
                    <i :class="menu.icon"></i>
                    <span>{{menu.menuname}}</span>
                  </template>
                </el-menu-item>
                <el-submenu :index="menu.id" v-else>
                  <template slot="title">
                    <i :class="menu.icon"></i>
                    <span>{{menu.menuname}}</span>
                  </template>
                  <template v-if="menu.menu2s != null" v-for="child in menu.menu2s">
                    <el-menu-item :index="child.index">{{child.name}}</el-menu-item>
                  </template>
                </el-submenu>
                </template>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main style="background-color: #ffffff;height: 700px">
              <!--//主界面-->
              <router-view></router-view>
            </el-main>
            <el-footer style="background-color: black">Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </div>

</template>
<script>

export default {
  name:'Home',
  data(){
    return{
      menuList:'',
      mp3:{
        id:'',
        name: '',
        auther: '',
        picUrl: '',
        mp3url:''
      }

    }
  },
  methods:{

  },
  created:function (){
    let jwt = localStorage.getItem("jwt");
    this.$axios.get('api/menulist',{headers:{"jwt":jwt}})
        .then(response =>{
          if(response.data.code==200){
            console.log(response.data);
            this.menuList=response.data.data;
          }
        });
    this.$axios
        .get("https://api.vvhan.com/api/rand.music?type=json&sort=热歌榜")
        .then(response =>{
          if(response.data.success){
            this.mp3=response.data.info;
          }else{
            this.mp3.name="加载歌曲失败";
          }
        });
    // this.$router.push("/homePage");
  },
  mounted() {
    const s = document.createElement('script');
    s.type = "module";
    s.scr = "https://api.vvhan.com/api/snow"
    document.body.appendChild(s);
    //console.log(s)
  }

}
</script>

<style scoped>
.el-menu-vertical-demo{
  height: 100vh;
}
.index{
  /*-moz-opacity:0.90;*/
  opacity: 0.90;
  filter:alpha(Opacity=90);
}
[v-cloak] {
  display: none;
}
</style>
